<template>
  <div>
    <!-- 整体框架布局 -->
    <div class="buju">
      <el-container>
        <!-- 头部 -->
        <el-header>共享洗衣机</el-header>
        <el-container>
          <!-- 外层框架的侧边栏区域 和宽度-->
          <el-aside width="260px">
            <!-- 折叠 -->
            <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
              <el-radio-button :label="false">展开</el-radio-button>
              <el-radio-button :label="true">收起</el-radio-button>
            </el-radio-group>-->
            <!-- 侧边栏菜单框架 -->
            <el-row class="tac">
              <el-col>
                <!--  active-text-color 选中改变文字颜色 -->
                <!-- background-color 弹性菜单背景颜色 -->
                <!-- :collapse="isCollapse" 折叠菜单 -->
                <el-menu
                  :default-active="this.$route.path"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose"
                  background-color=" #F7F8FC"
                  active-text-color="#4543CB"
                  :collapse="isCollapse"
                  :unique-opened="true"
                  router
                >
                  <el-submenu index="1">
                    <template slot="title">
                      <i class="el-icon-first-aid-kit"></i>
                      <span>首页</span>
                    </template>
                    <!-- 二级菜单 -->
                    <el-menu-item-group>
                      <el-menu-item index="/home/Index">首页</el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>

                  <el-submenu index="2">
                    <template slot="title">
                      <i class="el-icon-first-aid-kit"></i>
                      <span>用户管理</span>
                    </template>
                    <!-- 二级菜单 -->
                    <el-menu-item-group>
                      <el-menu-item index="/home/UserManage"
                        >基本信息管理</el-menu-item
                      >
                    </el-menu-item-group>
                    <el-menu-item-group>
                      <el-menu-item index="/home/SafetyManage"
                        >安全信息管理</el-menu-item
                      >
                    </el-menu-item-group>
                  </el-submenu>
                  <el-submenu index="3">
                    <template slot="title">
                      <i class="el-icon-printer"></i>
                      <span>代理管理</span>
                    </template>
                    <!-- 二级菜单 -->
                    <el-menu-item-group>
                      <el-menu-item index="/home/AgentManage"
                        >代理管理</el-menu-item
                      >
                    </el-menu-item-group>
                  </el-submenu>
                  <el-submenu index="4">
                    <template slot="title">
                      <i class="el-icon-data-analysis"></i>
                      <span>订单管理</span>
                    </template>
                    <!-- 二级菜单 -->
                    <el-menu-item-group>
                      <el-menu-item index="/home/OrderManage"
                        >订单管理</el-menu-item
                      >
                    </el-menu-item-group>
                  </el-submenu>

                  <el-submenu index="5">
                    <template slot="title">
                      <i class="el-icon-notebook-2"></i>
                      <span>洗衣房管理</span>
                    </template>
                    <!-- 二级菜单 -->
                    <el-menu-item-group>
                      <el-menu-item index="/home/WashHouse"
                        >洗衣房管理</el-menu-item
                      >
                      <!-- <el-menu-item index="/home/WashMachine">洗衣机管理</el-menu-item> -->
                    </el-menu-item-group>
                  </el-submenu>
                  <el-submenu index="6">
                    <template slot="title">
                      <i class="el-icon-edit-outline"></i>
                      <span>充值记录</span>
                    </template>
                    <!-- 二级菜单 -->
                    <el-menu-item-group>
                      <el-menu-item index="/home/RechargeRecord"
                        >充值记录</el-menu-item
                      >
                    </el-menu-item-group>
                  </el-submenu>
                  <!--数据统计的图标 <i class="el-icon-s-data"></i> -->
                  <!-- <el-menu-item index="6">
                  <i class="el-icon-setting"></i>
                  <span slot="title">系统设置</span>
                  </el-menu-item>-->
                  <el-submenu index="7">
                    <template slot="title">
                      <i class="el-icon-setting"></i>
                      <span>提现管理</span>
                    </template>
                    <!-- 二级菜单 -->
                    <el-menu-item-group>
                      <el-menu-item index="/home/WithdrawManage"
                        >提现管理</el-menu-item
                      >
                    </el-menu-item-group>
                  </el-submenu>
                  <el-submenu index="8">
                    <template slot="title">
                      <i class="el-icon-setting"></i>
                      <span>广告管理</span>
                    </template>
                    <!-- 二级菜单 -->
                    <el-menu-item-group>
                      <el-menu-item index="/home/AdvertiseManage"
                        >广告管理</el-menu-item
                      >
                    </el-menu-item-group>
                  </el-submenu>
                </el-menu>
              </el-col>
            </el-row>
          </el-aside>
          <!-- 主体内容 -->
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 折叠菜单
      isCollapse: false,
      isSelect: false,
    };
  },
  // 侧边栏菜单 （也是折叠菜单）
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
      this.isSelect = true;
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    chooseComponents(index) {},
  },
};
</script>
<style scoped>
/* 头部 */
.el-header {
  /* background-color: #b3c0d1; */
  background-color: #4543cb;
  color: white;
  text-align: center;
  line-height: 60px;
}
/* 侧边栏 */
.el-aside {
  background-color: #f7f8fc;
  /* background-color: #34aca2; */
  color: #333;
  text-align: center;
  /* line-height: 200px; */
  /* height: 900px; */
}
/* 折叠菜单 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 99.5%;
  min-height: 800px;
}

.el-submenu >>> .el-submenu__title {
  font-size: 18px;
  text-align: left;
  margin-top: 10px;
  margin-left: 20px;
}
/* .el-submenu  >>> .el-submenu__title {
  color: #39b9ae;
  border-left: 2px solid #39b9ae;
} */
.el-submenu >>> .el-submenu__title:hover {
  background-color: #f7f8fc !important;
}
.el-menu-item:hover {
  background-color: #f7f8fc !important;
}
.el-submenu >>> .el-icon-first-aid-kit {
  font-size: 20px;
}
.el-menu-item-group >>> .el-menu-item {
  text-align: left;
  font-size: 17px;
  margin-left: 33px;
  height: 35px;
  line-height: 35px;
  margin-bottom: 15px;
}
.el-menu-item-group >>> .is-active {
  border-left: 2px solid #4543cb;
}

/* 内容 */
.el-main {
  /* background-color: #eff2f5; */
  background-color: #ffffff;
  color: #333;
  /* text-align: center; */
  /* line-height: 160px; */
  /* height: 550px; */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
/* 侧边栏和内容的布局 */
/* .el-container{
height: 550px;
  } */
</style>